/**
 * 聊天对话框组件
 */

import React from 'react';
import { ASSISTANT_NAME } from '../constants';
import {
  dialogHeaderStyle,
  avatarStyle,
} from '../styles';
import MessageList from './MessageList';
import ChatInput from './ChatInput';
import ResizeHandle from './ResizeHandle';
import { Message } from '../types';

interface ChatDialogProps {
  dialogRef: React.RefObject<HTMLDivElement>;
  message: string;
  messages: Message[];
  onMessageChange: (value: string) => void;
  onSend: () => void;
  onKeyPress: (e: React.KeyboardEvent) => void;
  onSelectDesign?: (design: any) => void;
  width: number;
  height: number;
  onResizeStart: (direction: string) => (e: React.MouseEvent) => void;
}

const ChatDialog: React.FC<ChatDialogProps> = ({
  dialogRef,
  message,
  messages,
  onMessageChange,
  onSend,
  onKeyPress,
  onSelectDesign,
  width,
  height,
  onResizeStart,
}) => {
  return (
    <div
      ref={dialogRef}
      style={{
        position: 'fixed',
        bottom: '96px',
        right: '24px',
        width: `${width}px`,
        height: `${height}px`,
        backgroundColor: '#fff',
        borderRadius: '12px',
        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
        zIndex: 9998,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
        animation: 'slideUp 0.3s ease',
      }}
    >
      {/* 拖拽手柄 */}
      <ResizeHandle direction="left" onMouseDown={onResizeStart('left')} />
      <ResizeHandle direction="top" onMouseDown={onResizeStart('top')} />

      {/* 对话框头部 */}
      <div style={dialogHeaderStyle}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={avatarStyle}>🤖</div>
          <div>
            <div style={{ fontSize: '16px', fontWeight: 'bold' }}>{ASSISTANT_NAME}</div>
            <div style={{ fontSize: '12px', opacity: 0.9 }}>在线</div>
          </div>
        </div>
      </div>

      {/* 消息列表 */}
      <MessageList messages={messages} onSelectDesign={onSelectDesign} />

      {/* 输入框区域 */}
      <ChatInput
        message={message}
        onMessageChange={onMessageChange}
        onSend={onSend}
        onKeyPress={onKeyPress}
      />
    </div>
  );
};

export default ChatDialog;
